<template>
    <div class="insert-log-box flex-center-col">
        <div class="log-insert-head flex-center">
            <span style="font-size: 40px">
                <i class="el-icon-notebook-2" ></i>
                日志添加
            </span>

        </div>
        <div class="log-insert-body">
            <div class="log-insert-title flex-center">
                <input type="text" v-model="obj.form.title" placeholder="请输入标题">
            </div>

            <div class="log-insert-content">
                <textarea v-model="obj.form.content"
                          style="min-width: 400px;min-height: 300px;max-width: 800px;max-height: 350px;"
                          maxlength="300"
                          placeholder="请输入至多300字符的内容" />
                <div>
                    当前 : <span style="color: tomato">{{obj.form.content.length}}</span> / 300
                </div>
            </div>

            <div class="log-insert-menu">
                <button @click="logSubmit">提交</button>
            </div>
        </div>



    </div>
</template>

<script>
    import axios from 'axios'
    import {reactive} from "@vue/reactivity";
    import {ElMessage} from "element-plus";
    import {useRouter} from "vue-router";
    import {errorMessage, rejectMessage, successMessage} from "@/assets/js/utils";
    export default {
        name: "InsertLog",
        setup(){
            let router=useRouter()
            let obj=reactive({
                form:{
                    title:'',
                    content:'',
                }
            })
            function logSubmit() {

                axios.post("/api/ylb/log/insert",{
                    'lTitle':obj.form.title,
                    'lContent':obj.form.content
                },{
                    headers:{
                        token:localStorage.getItem("token")
                    }
                }).then(resp=>{
                    if(resp.data.code===200){
                        successMessage("添加日志成功")
                        router.push("/bc/logController")
                    }else{
                        if(rejectMessage(resp)){

                        }else{
                            errorMessage("添加失败:"+resp.data.msg)
                        }
                    }
                })
            }

            return{
                obj,
                logSubmit,
            }
        }
    }
</script>

<style scoped lang="less">
    .insert-log-box{
        width: 100%;
        height: 100%;
        background-color: white;
        .log-insert-head{
            width: 100%;
            height: 10%;
        }
        .log-insert-body{
            width: 100%;
            height: 90%;
            display: flex;
            flex-direction: column;
            align-items: center;

            .log-insert-title{
                width: 100%;
                height: 200px;

                input{
                    width: 50%;
                    height: 30px;
                    border: none;
                    outline: none;
                    font-size: 16px;
                    border-bottom: 2px solid #42b983;
                }
            }
            .log-insert-content{
                width: 100%;
                height: 400px;
                textArea{
                    width: 50%;
                    height: 80%;
                    padding: 10px;
                }
            }
            .log-insert-menu{
                width: 100%;
                height: 50px;
                button{
                    width: 100px;
                    height:40px;
                    font-size: 16px;
                    background-color: #42b983;
                    border: 0;
                    color: white;
                    border-radius: 5px;
                    cursor: pointer;
                }
                button:hover{
                    background-color: #4bd094;
                }
            }
        }

    }


</style>